<template>
  <div>
    <el-card class="box-card">
         <div class="header" slot="header"><span>区域列表数据添加</span></div>  
      <el-form ref="form" v-model="cityList" label-width="80px" size="medium">
        <el-form-item label="区域名称">
          <el-input v-model="areaName" placeholder="请输入区域名称"></el-input>
        </el-form-item>
        <el-form-item label="选择城市">
          <el-select v-model="Id" placeholder="请选择城市" >
           
            <el-option
              v-for="item in cityList"
              :key="item.cityId"
              :label="item.name"
              :value="item.cityId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
   
  </div>
</template>
<script>
export default {
  // data
  data() {
    return {
      cityList: [],
      Id:"",
      areaName:"" ,
      name:  ""   ,
       loading:false, 
      
    };
  },

  methods: {
    //获取区域的数据，用于遍历
    getArea() {
      const url = "/city/allCity";
      this.$axios
        .get(url)
        .then(res => {
          console.log("区域的值：", res);
          this.cityList = res.cities;
          console.log("arr", this.cityList);
        })
        .catch(err => {
          console.log("获取数据失败");
        });
    },
    onSubmit() {
      this.loading = true;
      // debugger;
      let url = "/area/add"
      let cityId=this.Id
      console.log("提交数据组", this.cityList);
     let length= this.cityList.length
     for(var i=0;i<length;i++){
       if(this.cityList[i].cityId==cityId){
        this.name= this.cityList[i].name
       }
     }
      console.log("name",this.name)
      let data = {
        cityId:cityId,
        name:this.areaName,
        cityName:this.name
      }
console.log("数据",data)
      this.$axios.post(url,data).then(res=>{
         this.loading=false
         this.$message.success('添加数据成功');
        console.log("添加区域：",res)
      }).catch(err=>{
         this.loading=false
         this.$message.error("请输入区域名");
        console.log("错误",err)
      })
    }
  },

  created() {
    this.getArea();
  },
  //计算属性
  // computed: {
  //   name() {
  //     console.log(this.$store.state.isName);
  //     return this.$store.state.isName;
  //   }
  // }
};
</script>
<style lang="less" scoped>
//卡片样式设置
.text {
  font-size: 14px;
  
}
.header{
    font-size: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
   
    }

.item {
  padding: 18px 0;
}

  .box-card {
  width: 100%;
  height: 85vh;
}
 .el-input,.el-select{
      width: 500px;
    }
</style> 